<template>
  <el-container>
    <!-- 全局导航栏 -->
    <el-header class="header">
      <el-button type="primary" @click="goBack">返回</el-button>
      <h1>{{ restaurant.name }}</h1>
    </el-header>

    <el-main>
      <!-- 餐厅信息展示 -->
      <el-row :gutter="20" class="restaurant-info">
        <el-col :span="8">
          <el-image :src="restaurant.image" fit="cover" class="restaurant-image"></el-image>
        </el-col>
        <el-col :span="16">
          <el-card class="restaurant-details">
            <div slot="header" class="clearfix">
              <span>{{ restaurant.name }}</span>
            </div>
            <p v-if="restaurant.description">{{ restaurant.description }}</p>
            <p v-else>暂无描述信息</p>
          </el-card>
        </el-col>
      </el-row>

      <!-- 菜单项展示 -->
      <el-row class="menu-section">
        <el-col :span="24">
          <h2>菜单项</h2>
          <el-table :data="restaurant.menuItems" style="width: 100%">
            <el-table-column prop="name" label="菜品名称" width="180"></el-table-column>
            <el-table-column prop="price" label="价格" width="100"></el-table-column>
            <el-table-column prop="user" label="用户评价" width="200"></el-table-column>
            <el-table-column label="图片">
              <template #default="scope">
                <el-image :src="scope.row.image" fit="cover" class="menu-item-image"></el-image>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <!-- 用户评分与评价 -->
      <el-row class="ratings-section">
        <el-col :span="24">
          <h2>用户评分</h2>
          <el-rate v-model="userRating"></el-rate>
        </el-col>
      </el-row>

      <el-collapse accordion class="reviews-section">
        <el-collapse-item title="查看评价" name="1">
          <div v-for="review in restaurant.reviews" :key="review.id" class="review-item">
            {{ review.content }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 获取图片 URL 的方法，适用于 Vite 和 Webpack
function getImageUrl(imagePath) {
  return new URL(`../assets/${imagePath}`, import.meta.url).href;
}

// 假设这些数据是从API获取的
const restaurant = ref({
  name: '汪云山的餐厅',
  image: '/src/assets/restaurants/picture.jpg', // 餐厅封面图
  description: '欢迎来到汪云山的美味餐厅，这里能提供各种垃圾',
  menuItems: [
    {
      name: '完美微光绽放',
      price: '$500层',
      user: '非常好用',
      image: '/src/assets/restaurants/img.png' // 菜品图片
    },
    // ... 其他菜品 ...
  ],
  reviews: [
    { id: 1, content: '非常棒的一次用餐体验！' },
    { id: 2, content: '服务态度非常好，菜品也很满意。' }
  ]
})

const userRating = ref(5) // 默认评分

// 返回功能
const router = useRouter()
const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
/* 添加一些样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.restaurant-info {
  margin-top: 20px;
}

.restaurant-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.restaurant-details {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-section h2,
.ratings-section h2 {
  margin-top: 20px;
}

.menu-item-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.reviews-section {
  margin-top: 20px;
}

.review-item {
  margin-bottom: 10px;
}
</style>